<template>
  <div class="app-container">
    <el-card v-loading="loading">
      <div slot="header" class="clearfix">
        <span>配置参数</span>
        <el-button style="float: right;" type="primary" v-if="!isEdit" @click="isEdit = true">修改配置</el-button>
        <el-button style="float: right;" v-else @click="handlerEdit">保存配置</el-button>
      </div>
      <el-row :gutter="24" type="flex" justify="space-around">
        <el-col :xs="24" :sm="24" :md="11" >
          <el-card>
            <div slot="header" class="clearfix">
              <span>CUP警告阈值设置({{cpuValue}}%)</span>
            </div>
            <div class="block">
              <div class="demonstration"  style="color: #67C23A;">
                <span >滑动调整阈值</span>
              </div>
              <el-slider
                v-model="cpuValue"
                show-stops
                :disabled="!isEdit"
                :marks="marks"
                :step="5" :format-tooltip="formatTooltip"></el-slider>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="11" >
          <el-card>
            <div slot="header" class="clearfix">
              <span>内存警告阈值设置({{memoryValue}}%)</span>
            </div>
            <div class="block">
              <div class="demonstration"  style="color: #E6A23C;">
                <span >滑动调整阈值</span>
              </div>
              <el-slider
                v-model="memoryValue"
                show-stops
                :disabled="!isEdit"
                :marks="marks"
                :step="5" :format-tooltip="formatTooltip"></el-slider>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" type="flex" justify="space-around" style="margin-top: 30px;padding-bottom: 20px;">
        <el-col :xs="24" :sm="24" :md="11" >
          <el-card>
            <div slot="header" class="clearfix">
              <span>磁盘警告值设置({{diskValue}}%)</span>
            </div>
            <div class="block">
              <div class="demonstration"  style="color: #F56C6C;">
                <span >滑动调整阈值</span>
              </div>
              <el-slider
                v-model="diskValue"
                show-stops
                :disabled="!isEdit"
                :marks="marks"
                :step="5" :format-tooltip="formatTooltip"></el-slider>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="11"></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import {
    monitoringList,
    editMonitoring,
  } from '../service'
  export default {
    name: "index",
    data() {
      return {
        isEdit: false,
        loading: false,
        cpuValue: 0,
        diskValue: 0,
        memoryValue: 0,
        marks: {
          0: '0%',
          50: '50%',
          100: '100%',
        },
        info: {}
      }
    },
    methods: {
      formatTooltip(val) {
        return val + '%'
      },
      async handlerEdit() {
        // 保存数据
        this.loading = true
        const res = await editMonitoring([
          {
            ...this.info[0],
            configValue: this.cpuValue
          },
          {
            ...this.info[1],
            configValue: this.memoryValue
          },
          {
            ...this.info[2],
            configValue: this.diskValue
          },
        ])
        if (res.code !== 200) return this.$message.error(res.msg || '修改失败')
        this.$message.success('修改成功！')
        this.loading = false
        this.isEdit = false
      },
      async getInfo() {
        const res = await monitoringList();
        if (res.code !== 200) {
          return this.$message.error('请求出错！请重试')
        }
        this.loading = false
        this.cpuValue = Number(res.data[0]['configValue'] || 0)
        this.memoryValue =  Number(res.data[1]['configValue'] || 0)
        this.diskValue =  Number(res.data[2]['configValue'] || 0)
        this.info = res.data
      },
    },
    mounted() {
      this.loading = true
      this.getInfo()
    }
  }
</script>

<style scoped>

</style>
